<template>
  <view class="nav-bar-tab">
    <view class="left-icon" @tap="navBack">
      <slot name="left"> </slot>
    </view>
    <view class="center">
      <slot name="center"></slot>
    </view>
    <view class="right-icon">
      <slot name="rightIcon"> </slot>
    </view>
  </view>
</template>
<script>
export default {
  props: {},
  data() {
    return {};
  },
  methods: {
    navBack() {
      this.$mRouter.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar-tab {
  position: relative;
  height: 90upx;
  display: flex;
  align-items: center;
  .left-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 30upx;
    cursor: pointer;
  }
  .center {
    max-width: 60%;
    margin: 0 auto;
    font-size: 34upx;
    font-weight: bold;
  }
  .right-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 30upx;
    cursor: pointer;
  }
}
</style>
